import React, { useEffect, useState } from 'react'
import { PageHeader, Descriptions } from 'antd'
import moment from 'moment'
import { getNewsInfo } from '@api'

export default function NewsPreview(props) {
  /*--------------------------------------state-----------------------------------------------------------------*/
  /*--------------------------------------state-----------------------------------------------------------------*/
  /*--------------------------------------state-----------------------------------------------------------------*/
  /*--------------------------------------state-----------------------------------------------------------------*/
  const [newsInfo, setnewsInfo] = useState(null)
  const auditList = ["未审核", '审核中', '已通过', '未通过']
  const publishList = ["未发布", '待发布', '已上线', '已下线']
  const colorList = ["black", "orange", "green", "red"]
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  useEffect(() => {
    get_news_info()
  }, [])
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  const get_news_info = () => {
    getNewsInfo({
      id:props.match.params.id,
      _expand: ['category','role']
    }).then((res) => {
      setnewsInfo(res.data)
    })
  }
  return (
    <div>
      {
        newsInfo ?
          <div>
            <PageHeader onBack={() => window.history.back()} title={newsInfo.title}  subTitle={newsInfo.category.title}>
              <Descriptions size="small" column={3}>
                <Descriptions.Item label="创建者">{newsInfo.author}</Descriptions.Item>
                <Descriptions.Item label="创建时间">{moment(newsInfo.createTime).format("YYYY/MM/DD HH:mm:ss")}</Descriptions.Item>
                <Descriptions.Item label="发布时间">{newsInfo.publishTime ? moment(newsInfo.publishTime).format("YYYY/MM/DD HH:mm:ss") : "-"}</Descriptions.Item>
                <Descriptions.Item label="区域">{newsInfo.region}</Descriptions.Item>
                <Descriptions.Item label="审核状态" ><span style={{ color: colorList[newsInfo.auditState] }}>{auditList[newsInfo.auditState]}</span></Descriptions.Item>
                <Descriptions.Item label="发布状态" ><span style={{ color: colorList[newsInfo.publishState] }}>{publishList[newsInfo.publishState]}</span></Descriptions.Item>
                <Descriptions.Item label="访问数量">{newsInfo.view}</Descriptions.Item>
                <Descriptions.Item label="点赞数量">{newsInfo.star}</Descriptions.Item>
                <Descriptions.Item label="评论数量">0</Descriptions.Item>
              </Descriptions>
            </PageHeader>
            <div dangerouslySetInnerHTML={{ __html: newsInfo.content }} style={{ margin: "0 24px", border: "1px solid gray" }} />
          </div>
          :
          ''
      }
    </div>
  )
}
